<template>
  <div class="main-container">
    <a-tabs class="a-tabs">
      <a-tab-pane v-for="tabKey in Object.keys(tabs)" :key="tabKey" :tab="tabs[tabKey].title">
        <component :is="tabs[tabKey].componentId" @onTotalChange="handleTotalChange(tabKey, $event)">
        </component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import SentListMain from './pages/sent-list-main.vue';
import SentListFromMe from './pages/sent-list-from.vue';
import SentListToMe from './pages/sent-list-to.vue';
export default {
  components: { SentListMain, SentListFromMe, SentListToMe },
  data() {
    return {
      tabs: {
        // all: {
        //   title: '全部已办(0)',
        //   componentId: 'PageAllDownList'
        // },
        sentListMain: {
          title: $.i18n('common.my.sent.title'),
          componentId: 'SentListMain'
        },
        sentListToMe: {
          title: $.i18n("handover.button.to.js"),
          componentId: 'SentListToMe'
        },
        sentListFromMe: {
          title: $.i18n("handover.button.from.js"),
          componentId: 'SentListFromMe'
        },
      }
    };
  },
  methods: {
    handleTotalChange(tabType, total) {
      this.tabs[tabType].title = this.tabs[tabType].title.replace(/\(\d+\)$/, `(${total})`);
    }
  },
  created() {
    window.v3x = new V3X();
    window.v3x.init(_ctxPath, _locale);
    window._wfcurrentUserId = window._currentUser.id;
  }
};
</script>
<style>
  @import url('../../assets/css/common.css');
</style>
<style lang="scss" scoped>
.main-container {
  height: 100%;
  padding-left: 16px;
  box-sizing: border-box;
}

.a-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;

  &::v-deep .ant-tabs-content {
    flex-grow: 1;
  }

  &::v-deep .ant-tabs-nav .ant-tabs-tab {
    padding: 10px 16px;
  }
}
</style>
